<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <!--使用作用域插槽，一定需要在最外层套一层template，
            同时使用slot-scope来定义一个属性值，
            例如使用props，这个props就是自定义组件:item传递的数据-->
        <template slot-scope="props">
            <!--props.item -> 自定义组件:item绑定的item数据-->
            <h1>{{props.item}}--hello</h1>
        </template>
    </child>
</div>
<script>
    Vue.component('child', {
        data: function () {
            return {
                list: [1, 2, 3, 4]
            }
        },
        template: `<div>
                    <ul>
                        <slot v-for="item of list"
                              :item="item"
                        >
                        </slot>
                    </ul>
                   </div>`
    });
    var app = new Vue({
        el: '#app'
    });
</script>
</body>
</html>